<!DOCTYPE html>
<html>

<head>
    <title>文本输入框</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <!--[if lte IE 6]>
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap-ie6.css">
    <![endif]-->
    <!--[if lte IE 7]>
    <link rel="stylesheet" type="text/css" href="bootstrap/css/ie.css">
    <![endif]-->
    <script src="core.js"></script>
    <script src="jscolor-2.0.4/jscolor.min.js"></script>
</head>

<body>
    <div class="content">
        <table class="table table-bordered table-striped table-hover">
            <tr>
                <th><span>控件ID</span><span class="label label-important">*</span></th>
                <th><span>控件名称</span><span class="label label-important">*</span></th>
            </tr>
            <tr>
                <td><input type="text" id="txtID" placeholder="必填项"></td>
                <td><input type="text" id="txtNAME" onchange="$G('txtDESCNAME').value = $G('txtNAME').value" placeholder="必填项"></td>
            </tr>
            <tr>
                <th><span>标签</span> </th>
                <th><span>描述名</span> </th>
            </tr>
            <tr>
                <td><input type="text" id="txtTAG" placeholder="标签,多个用逗号隔开"></td>
                <td><input type="text" id="txtDESCNAME" placeholder="描述名"></td>
            </tr>
            <tr>
                <th><span>数据类型</span> </th>
                <th><span>默认值</span> </th>
            </tr>
            <tr>
                <td>
                    <select id="txtVERIFYTYPE">
                        <option value="\S" selected="selected">普通文本</option>
                        <option value="^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$">邮箱地址</option>
                        <option value="^[0-9]*$">整数</option>
                        <option value="^-?\d+\.\d+$">小数</option>
                        <option value="^\d{15}|\d{}18$">身份证号码</option>
                    </select>
                </td>
                <td><input type="text" id="txtVALUE" placeholder="默认值"></td>
            </tr>
            <tr>
                <th><span>是否必填</span> </th>
                <th><span>是否只读</span> </th>
            </tr>
            <tr>
                <td>
                    <label class="checkbox inline"><input id="txtREQUIRED" type="checkbox" /> 必填 </label>
                </td>
                <td>
                    <label class="checkbox inline"><input id="txtREADONLY" type="checkbox" /> 只读 </label>
                </td>
            </tr>
            <tr>
                <th><span>字体颜色</span> </th>
                <th><span></span> </th>
            </tr>
            <tr>
                <td>
                    <input type="text" id="txtCOLOR" class="jscolor" placeholder="颜色" value="000000">
                </td>
                <td>
                </td>
            </tr>
        </table>
    </div>

    <script type="text/javascript">
        //debugger;
        (function(UE) {
            var oNode = null,
                thePlugins = 'sdecontroltext';
            //初始化加载之前编辑的数据
            window.onload = function() {
                if (UE.plugins[thePlugins].editdom) {
                    oNode = UE.plugins[thePlugins].editdom;
                    var json = JSON.parse(oNode.getAttribute('sde-model'));
                    if (!json || json == null) {
                        alert("无法json序列化！");
                        return;
                    }
                    //json = gValue == null ? '' : gValue;
                    //gTitle = gTitle == null ? '' : gTitle;
                    $G('txtID').value = json.ID;
                    $G('txtNAME').value = json.NAME;
                    $G('txtCOLOR').value = json.COLOR;
                    $G('txtCOLOR').style.backgroundColor = "#" + json.COLOR;
                    $G('txtTAG').value = json.TAG;
                    $G('txtVALUE').value = json.VALUE;
                    $G('txtDESCNAME').value = json.DESCNAME;
                    //作为对原email、int类型值的过渡处理
                    var vType = {
                        "int": "^[0-9]*$",
                        "email": "^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\\.[a-zA-Z0-9_-]{2,3}){1,2})$",
                        "text": "\\S",
                        "float": "^-?\\d+\\.\\d+$",
                        "idcard": "^\\d{15}|\\d{}18$"
                    };
                    var regStr = vType[json.VERIFYTYPE];
                    $G('txtVERIFYTYPE').value = regStr ? regStr : json.VERIFYTYPE;
                    if (json.REQUIRED == 1) {
                        $G('txtREQUIRED').checked = true;
                    }
                    if (json.READONLY == 1) {
                        $G('txtREADONLY').checked = true;
                    }
                    $G('txtID').setAttribute('readonly', 'readonly');
                }
                $G('txtID').focus();
            };

            function makeHtml(json) {
                var isClear = 1,
                    show = json.DESCNAME == '' ? ' ' : json.DESCNAME;
                if (json.VALUE != '') {
                    show = json.VALUE;
                    isClear = 0;
                }
                if (json.READONLY == 1)
                    isClear = 0;
                var html = '<span class="sde-left" style="color:' +
                    ((json.READONLY == 1) ? '#808080' : '#0000FF') +
                    '" contenteditable="false">[</span><span  title="' + json.DESCNAME + '"  style="color:#' + json.COLOR + ';"  class="sde-value" ' +
                    ((json.READONLY == 1) ? ' contenteditable="false" ' : ' contenteditable="true" ') +
                    '>' + show + '</span><span style="color:' +
                    ((json.READONLY == 1) ? '#808080' : '#0000FF') +
                    '" contenteditable="false" class="sde-right">]</span>';
                return html;
            }
            dialog.oncancel = function() {
                if (UE.plugins[thePlugins].editdom) {
                    delete UE.plugins[thePlugins].editdom;
                }
            };
            dialog.onok = function() {
                if ($G('txtID').value == '') {
                    alert('请输入控件ID');
                    return false;
                }
                if ($G('txtNAME').value == '') {
                    alert('请输入控件名称');
                    return false;
                }

                var json = {
                    ID: $G('txtID').value,
                    TYPE: 'text',
                    NAME: $G('txtNAME').value,
                    TAG: $G('txtTAG').value,
                    DESCNAME: $G('txtDESCNAME').value,
                    VERIFYTYPE: $G('txtVERIFYTYPE').value,
                    VALUE: $G('txtVALUE').value,
                    REQUIRED: 0,
                    READONLY: 0,
                    COLOR: $G('txtCOLOR').value
                };
                if ($G('txtREQUIRED').checked) {
                    json.REQUIRED = 1;
                }
                if ($G('txtREADONLY').checked) {
                    json.READONLY = 1;
                }
                var html = makeHtml(json);
                if (!oNode) {
                    try {
                        oNode = createElement('span', json.ID);
                        oNode.setAttribute('title', json.NAME);
                        oNode.setAttribute('sde-model', JSON.stringify(json));
                        oNode.setAttribute("contenteditable", "false");
                        oNode.setAttribute('class', 'sde-bg');
                        oNode.innerHTML = html; //todo:具体需要实现

                        editor.execCommand('insertHtml', "<span> </span>" + oNode.outerHTML + "<span> </span>");
                    } catch (e) {
                        try {
                            editor.execCommand('error');
                        } catch (e) {
                            alert('控件异常，请联系管理员！');
                        }
                        return false;
                    }
                } else {
                    oNode.setAttribute('title', json.NAME);
                    oNode.setAttribute('id', json.ID);
                    oNode.setAttribute('sde-model', JSON.stringify(json));
                    oNode.innerHTML = html;
                    delete UE.plugins[thePlugins].editdom;
                }
            };
        })(UE);
    </script>
</body>

</html>